<template>
  <div class="KCard" :style="`border-radius: ${radius}em;`">
      <slot name="header"></slot>
    <el-divider></el-divider>
      <slot></slot>
  </div>
</template>

<script>
import { ref } from "vue"
export default {
    name : "KCard",
    props : ['shadow', 'radius'],
    setup(props) {
        let shadow = ref("");
        let radius = ref(1.2);
        if (props.shadow !== undefined)
            shadow.value = props.shadow;
        if (props.radius !== undefined)
            radius.value = props.radius;
 
        return {
            shadow,
            radius
        }
    }
};
</script>

<style>
.KCard {
  padding-left: 15px;
  padding-right: 15px;
  width: auto;
  height: auto;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: "Roboto Slab", serif;
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}

.KCard:hover {
  box-shadow: 0 0 25px var(--shadowColor), 
              0 0 25px var(--shadowColor),
              0 0 25px var(--shadowColor), 
              0 0 25px var(--shadowColor);
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}
</style>